<template>
    <div>
        <el-upload
                :action="action"
                :headers="headers"
                list-type="picture-card"
                :limit="limit"
                multiple
                class="upload-Activity"
                :class="{widthClass160 : edUploadForm.widthClass160,widthClass124:edUploadForm.widthClass124}"
                ref="upload"
                accept=".jpeg,.png,.jpg"
                :file-list="fileList"
                :before-upload="beforeAvatarUpload"
                :on-success="uploadSuccess">
            <i class="el-icon-plus fontSize14">
                <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65); margin: 10px 0 12px 0;line-height: 1">上传图片</div>
                <div style="font-size: 14px;color: rgba(0, 0, 0, 0.65);line-height: 1" v-if="!edUploadForm.sizeTips">大小不超过2M</div>
            </i>
            <div slot="file" slot-scope="{file}">
                <el-image
                        class="el-upload-list__item-thumbnail"
                        :class="{widthClass160 : edUploadForm.widthClass160,widthClass124:edUploadForm.widthClass124}"
                        :src="file.url" alt="" fit="contain"
                />
                <span class="el-upload-list__item-actions">
                    <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                    >
                    <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                    >
                    <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {getToken} from 'src/utils/auth'
    export default {
        name: "EdUpload",
        props:{
            edUploadForm:{
                type:Object,
                required: false
            }
        },
        data(){
            return{
                list:[],
                fileList:[],
                file:new FormData(),
                action:"",
                headers:{
                    RdAuthorization: getToken()
                },
                disabled: false,
                dialogVisible:false,
                dialogImageUrl:"",
                limit:5
            }
        },
        mounted(){
            this.action = this.$baseApi + "/file/upload";
            this.limit = this.edUploadForm.limit || 5
            if(this.edUploadForm.list){
                this.list = [...this.edUploadForm.list];
            }
            this.fileList = this.list;
        },
        watch:{
            "edUploadForm.list"(val){
                this.list = [...val];
                this.fileList = this.list;
            }
        },
        methods:{
            request(){

            },
            onchange(){

            },
            setPic(val){
                this.list = val
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleRemove(file){
                for (let i=0;i<this.list.length;i++){
                    if(this.list[i].uid == file.uid){
                        this.list.splice(i,1)
                    }
                }
                this.$emit("fileList",this.fileList)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            uploadSuccess(response, file, fileList){
                if(response.code == 20000){
                    this.list.push(file);
                    this.$emit("fileList",this.fileList)
                }else {
                    this.$message.error({
                        message: response.message,
                        center: true,
                        duration: 2000,
                    })
                }
            }
        }
    }
</script>

<style lang="scss">
    .upload-Activity{
        .el-upload{
            width: 104px;
            height: 104px;
            background: rgba(0, 0, 0, 0.04);
            .el-icon-plus::before{
                font-size: 20px;
            }
        }
        ul{
            line-height: 1;
            li{
                width: 104px !important;
                height: 104px !important;
                margin: 0 8px 0 0 !important;
            }
        }
        .lengManx{
            padding: 12px 0;
            line-height: 22px;
        }
    }
    .widthClass160{
        .el-upload{
            width: 160px;
            height: 120px;
            background: rgba(0, 0, 0, 0.04);
            .el-icon-plus {
                margin-top: 20px;
            }
            .el-icon-plus::before{
                font-size: 20px;
            }
        }
        ul{
            line-height: 1;
            li{
                width: 160px !important;
                height: 120px !important;
                margin: 0 8px 0 0 !important;
            }
        }
        .lengManx{
            padding: 12px 0;
            line-height: 22px;
        }
    }

    .widthClass124{
        .el-upload{
            width: 124px;
            height: 124px;
            background: rgba(0, 0, 0, 0.04);
            .el-icon-plus {
                margin-top: 20px;
            }
            .el-icon-plus::before{
                font-size: 20px;
            }
        }
        ul{
            line-height: 1;
            li{
                width: 124px !important;
                height: 124px !important;
                margin: 0 8px 0 0 !important;
            }
        }
        .lengManx{
            padding: 12px 0;
            line-height: 22px;
        }
    }
</style>